<template>
  <view class="detail-container">
    <!-- 图片轮播 -->
    <swiper
      class="image-carousel"
      autoplay
      indicator-dots
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#ffffff"
      circular
    >
      <swiper-item v-for="item in detail.merchantImgs.img.split(',')" >
        <image
          class="shop-image"
          :src="item"
          mode="aspectFill"
        ></image>
      </swiper-item>
  
    </swiper>

    <!-- 门店基本信息 -->
    <view class="shop-info">
      <text class="shop-name">{{ detail.name }}</text>
      <view class="rating-info">
        <text class="stars">{{ detail.starts }}</text>
        <text class="score">{{ detail.rate }}</text>
        <text class="sales">销量：322</text>
      </view>
      <text class="business-hours"
        >营业时间：周一至周日
        {{
          (detail.startTime &&
            detail.startTime.split("T")[1]?.split(".")[0]?.substring(0, 5)) ||
          "09:00"
        }}-
        {{
          (detail.endTime &&
            detail.endTime.split("T")[1]?.split(".")[0]?.substring(0, 5)) ||
          "18:00"
        }}</text
      >
      <view class="address-info">
        <text class="address">{{ detail.address }}</text>
        <text class="location-icon" @click="navigateToLocation">🧭</text>
      </view>
    </view>

    <!-- 服务项目 -->
    <view class="service-section">
      <view class="section-header">
        <view class="section-title">服务</view>
        <view class="toggle-switch" @click="toggleServices">
          <text class="toggle-label"
            >{{ showServices ? "隐藏" : "显示" }}服务</text
          >
          <text class="toggle-icon">{{ showServices ? "▼" : "▶" }}</text>
        </view>
      </view>

      <!-- 服务项目列表 - 可选项显示 -->
      <view
        v-if="showServices && serviceItems.length > 0"
        class="service-items"
      >
        <view
          v-for="item in serviceItems"
          :key="item.id"
          class="service-item-container"
          @click="toggleService(item)"
        >
          <view class="service-item">
            <view class="checkbox" :class="{ selected: item.selected }">
              <text class="check-icon" v-if="item.selected">✓</text>
            </view>
            <view class="service-details">
              <text class="service-name">{{ item.name }}</text>
              <view class="price-info">
                <text class="current-price">¥ {{ item.presentPrice }}</text>
                <text class="original-price">¥{{ item.originalPrice }}</text>
              </view>
            </view>
          </view>
          <view class="service-description">
            <text>{{ item.introduction || "暂无服务介绍" }}</text>
          </view>
        </view>
      </view>

      <!-- 无服务项目时的提示 -->
      <view v-if="!showServices" class="services-collapsed">
        <text class="collapsed-text">服务项目已隐藏</text>
      </view>

      <view
        v-if="showServices && serviceItems.length === 0"
        class="no-services"
      >
        <text class="no-services-text">暂无服务项目</text>
      </view>
    </view>

    <!-- 服务评价 -->
    <view class="review-section">
      <view class="section-title">服务评价</view>
      <view v-for="item in evaluates" :key="item.id" class="review-item">
        <view class="review-header">
          <view class="reviewer-info">
            <image
              class="avatar"
              :src="item.user.avatar"
              mode="aspectFill"
            ></image>
            <text class="reviewer-name">{{ item.user.nickName }}</text>
            <text class="review-stars">{{ item.stars }}</text>
          </view>
          <text class="review-date">{{ item.time }}</text>
        </view>
        <text class="review-content">{{ item.content || "暂无评价内容" }}</text>
        <view class="review-images">
          <image
            v-for="(good, index) in item.imgs.split(',')"
            class="review-image"
            :src="good"
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="cart-section" @click="toggleCart">
        <text class="cart-icon">🛒</text>
        <text class="cart-count" v-if="selectedCount > 0">{{
          selectedCount
        }}</text>
      </view>
      <button class="cart-btn" @click="toggleCart">
        购物车({{ selectedCount }})
      </button>
      <button class="confirm-btn" @click="showSelectedServices">
        确认已选服务
      </button>
    </view>

    <!-- 购物车面板 -->
    <view class="cart-panel" v-if="showCartPanel">
      <view class="cart-header">
        <text class="cart-title">服务订单</text>
        <text class="cart-close" @click="closeCart">×</text>
      </view>
      <view class="cart-content">
        <view
          class="cart-item"
          v-for="(item, index) in cartItems"
          :key="index"
          @click="toggleSelectItem(index)"
        >
          <view class="cart-item-check" :class="{ selected: item.selected }">
            <text class="check-icon" v-if="item.selected">✓</text>
          </view>
          <view class="cart-item-info">
            <text class="cart-item-name">{{ item.name }}</text>
          </view>
          <view class="cart-item-price">
            <text class="price" :class="{ 'selected-price': item.selected }">{{
              item.presentPrice
            }}</text>
          </view>
        </view>
      </view>
      <view class="cart-footer">
        <view class="total-section">
          <text class="total-label">合计：</text>
          <text class="total-price">¥ {{ totalPrice }}</text>
        </view>
        <button class="confirm-order-btn" @click="confirmOrder">
          确认已选服务
        </button>
      </view>
    </view>

    <!-- 遮罩层 -->
    <view class="mask" v-if="showCartPanel" @click="closeCart"></view>
  </view>
</template>

<script>
import request from "@/utils/request";

export default {
  components: {},
  data() {
    return {
      detail: {},
      showCartPanel: false,
      showServices: true, // 添加服务项目显示控制
      serviceItems: [],
      cartItems: [],
      evaluates: [],
    };
  },
  computed: {
    totalPrice() {
      return this.serviceItems
        .filter((item) => item.selected)
        .reduce((total, item) => total + item.presentPrice, 0);
    },
    selectedCount() {
      return this.serviceItems.filter((item) => item.selected).length;
    },
  },
  methods: {
    navigateToLocation(){
        uni.setStorageSync("merchantSelected", JSON.stringify(this.detail));
        uni.navigateTo({
        url: "../navigation/navigation",
      });
    },
    toggleCart() {
      this.showCartPanel = !this.showCartPanel;
    },
    closeCart() {
      this.showCartPanel = false;
    },
    // 切换服务项目显示状态
    toggleServices() {
      this.showServices = !this.showServices;
      uni.showToast({
        title: this.showServices ? "服务已显示" : "服务已隐藏",
        icon: "none",
        duration: 1000,
      });
      
    },

    // 切换服务项目选择状态
    toggleService(item) {
      item.selected = !item.selected;
      if (item.selected) {
        const index = this.cartItems.findIndex(
          (service) => service.id === item.id
        );
        if (index !== -1) {
          this.cartItems[index].selected = true;
        } else {
          this.cartItems.push(item);
        }
      } else {
        const index = this.cartItems.findIndex(
          (service) => service.id === item.id
        );
        if (index !== -1) {
          this.cartItems.splice(index, 1);
        }
      }

      const action = item.selected ? "已选择" : "已取消";

      uni.showToast({
        title: `${item.name} ${action}`,
        icon: "none",
        duration: 1000,
      });
    },
    showSelectedServices() {
      // 跳转到确认订单页面
      const selectedItems = this.serviceItems.filter((item) => item.selected);
      if (selectedItems.length === 0) {
        uni.showToast({
          title: "请至少选择一项服务",
          icon: "none",
        });
        return;
      }

      // 显示购物车面板
      this.showCartPanel = true;
    },
    getEvalute() {
      request({
        url: "/pyh/evaluate/listBy?merchantId=" + this.detail.id,
        method: "GET",
      }).then((res) => {
        if (res.code === 200) {
          console.log("评论", res);
          this.evaluates = res.rows;
          // 计算评价星级
          this.evaluates.forEach((item) => {
            item.stars = "⭐".repeat(item.rate) + "☆".repeat(5 - item.rate);
          });
        }
      });
    },

    toggleSelectItem(index) {
      // 同步购物车到服务项目
      this.serviceItems[index].selected = !this.serviceItems[index].selected;
      this.cartItems[index].selected = this.serviceItems[index].selected;

      // 显示提示
      const item = this.serviceItems[index];
      const action = item.selected ? "已选择" : "已取消";
      uni.showToast({
        title: `${item.name} ${action}`,
        icon: "none",
        duration: 1000,
      });
    },

    confirmOrder() {
      const selectedItems = this.serviceItems.filter((item) => item.selected);
      if (selectedItems.length === 0) {
        uni.showToast({
          title: "请选择服务后再下单",
          icon: "none",
        });
        return;
      }

      // 显示下单成功信息
      uni.showModal({
        title: "订单确认",
        content: `确认选择以下 ${selectedItems.length} 项服务？\n${selectedItems
          .map((item) => `• ${item.name} - ¥${item.presentPrice}`)
          .join("\n")}\n\n总计：¥${this.totalPrice}`,
        success: (res) => {
          if (res.confirm) {
            // 保存已选服务到本地存储（微信小程序版）
            uni.setStorageSync("selectedServices", selectedItems);
            uni.setStorageSync("detail", this.detail);
            // request({
            //   url: "/pyh/order/addMaintenanceOrder",
            //   method: "POST",
            //   data:{
            //     serviceTypeId:3,
            //     serviceDetails:selectedItems,
            //     orderUserMerchant:{
            //       merchantId:1,
            //       orderContent:JSON.stringify(selectedItems)
            //     }
            //   }
            // }).then(res => {
            //   if (res.code === 200) {
            //     uni.showToast({
            //       title: "下单成功",
            //       icon: "success",
            //       duration: 2000,
            //     });
            //   }
            // });

            setTimeout(() => {
              this.closeCart();
              uni.navigateTo({ url: "../confirm/confirm" });
            }, 2000);
          }
        },
      });
    },
  },
  // 页面周期函数--监听页面加载
  onLoad(options) {
    const merchantId = options.merchantId
    request({
      // url: "/pyh/merchant/detail/"+merchantId,
      url: "/pyh/merchant/detail/"+1,
      method: "GET",
    }).then((res) => {
      if (res.code === 200) {
        console.log(res);
        this.detail = res.data;
        this.getEvalute();
        // 为服务项目添加选中状态
        this.serviceItems = res.data.serviceDetails.map((item) => ({
          ...item,
          selected: false,
        }));
        let rounded = Math.floor(res.data.rate);
        this.detail.starts = "⭐".repeat(rounded) + "☆".repeat(5 - rounded);
        console.log(this.detail);
        console.log(this.serviceItems);
      }
    });

    console.log("门店详情页面加载");
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
};
</script>

<style scoped>
.detail-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

/* 图片轮播样式 */
.image-carousel {
  width: 100%;
  height: 500rpx;
}

.shop-image {
  width: 100%;
  height: 100%;
}

/* 门店基本信息样式 */
.shop-info {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 20rpx;
  display: block;
}

.rating-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.stars {
  font-size: 28rpx;
  margin-right: 10rpx;
}

.score {
  font-size: 28rpx;
  color: #666666;
  margin-right: 30rpx;
}

.sales {
  font-size: 28rpx;
  color: #999999;
}

.business-hours {
  display: block;
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 20rpx;
}

.address-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.address {
  font-size: 28rpx;
  color: #666666;
  flex: 1;
}

.location-icon {
  font-size: 32rpx;
}

/* 服务项目样式 */
.service-section {
  background-color: #ffffff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  border-left: 4rpx solid #ff4d4f;
  padding-left: 20rpx;
}

/* 切换开关样式 */
.toggle-switch {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.toggle-switch:active {
  background-color: #e6e6e6;
  transform: scale(0.95);
}

.toggle-label {
  font-size: 26rpx;
  color: #666666;
  margin-right: 10rpx;
}

.toggle-icon {
  font-size: 24rpx;
  color: #999999;
}

/* 服务项目容器 */
.service-items {
  margin-top: 10rpx;
}

.service-item-container {
  margin-bottom: 20rpx;
  border: 1rpx solid #f0f0f0;
  border-radius: 10rpx;
  overflow: hidden;
}

.service-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #ffffff;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 50%;
  margin-right: 20rpx;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.checkbox.selected {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

.check-icon {
  color: #ffffff;
  font-size: 24rpx;
  font-weight: bold;
  text-align: center;
  line-height: 36rpx;
  display: block;
}

.service-details {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-name {
  font-size: 30rpx;
  color: #333333;
  flex: 1;
}

.price-info {
  display: flex;
  align-items: center;
}

.current-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #ff4d4f;
  margin-right: 10rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
}

.service-description {
  padding: 20rpx;
  background-color: #f8f8f8;
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  border-top: 1rpx solid #f0f0f0;
}

/* 无服务项目时的样式 */
.services-collapsed,
.no-services {
  text-align: center;
  padding: 40rpx 20rpx;
  color: #999999;
  font-size: 28rpx;
  background-color: #f8f8f8;
  border-radius: 10rpx;
  border: 2rpx dashed #d9d9d9;
  margin-top: 20rpx;
}

.collapsed-text,
.no-services-text {
  color: #999999;
  font-style: italic;
}

/* 服务评价样式 */
.review-section {
  background-color: #ffffff;
  padding: 30rpx;
  padding-bottom: 150rpx;
  margin-bottom: 20rpx;
}

.review-item {
  padding: 20rpx 0;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.reviewer-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  margin-right: 15rpx;
}

.reviewer-name {
  font-size: 28rpx;
  color: #333333;
  margin-right: 15rpx;
}

.review-stars {
  font-size: 24rpx;
}

.review-date {
  font-size: 24rpx;
  color: #999999;
}

.review-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 20rpx;
  display: block;
}

.review-images {
  display: flex;
  gap: 20rpx;
}

.review-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
}

/* 底部操作栏样式 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.cart-section {
  position: relative;
  margin-right: 20rpx;
  cursor: pointer;
}

/* 购物车面板样式 */
.cart-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-top-left-radius: 30rpx;
  border-top-right-radius: 30rpx;
  box-shadow: 0 -5rpx 20rpx rgba(0, 0, 0, 0.1);
  z-index: 999;
  animation: slide-up 0.3s ease-in-out;
}

@keyframes slide-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.cart-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.cart-close {
  font-size: 48rpx;
  color: #999999;
  padding: 0 10rpx;
  cursor: pointer;
}

.cart-content {
  max-height: 500rpx;
  overflow-y: auto;
  padding: 20rpx 30rpx;
}

.cart-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.cart-item {
  cursor: pointer;
}

.cart-item-check {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  border: 2rpx solid #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  transition: all 0.3s;
}

.cart-item-check.selected {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
}

.check-icon {
  color: #ffffff;
  font-size: 24rpx;
}

.cart-item-info {
  flex: 1;
}

.cart-item-name {
  font-size: 30rpx;
  color: #333333;
}

.cart-item-price {
  font-size: 32rpx;
  font-weight: bold;
  color: #999999;
}

.cart-item-price .selected-price {
  color: #ff4d4f;
}

.cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.total-section {
  display: flex;
  align-items: center;
}

.total-label {
  font-size: 28rpx;
  color: #666666;
}

.total-price {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4d4f;
  margin-left: 10rpx;
}

.confirm-order-btn {
  background-color: #ff4d4f;
  color: #ffffff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  font-weight: bold;
}

/* 遮罩层样式 */
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 998;
}

.cart-icon {
  font-size: 48rpx;
}

.cart-count {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background-color: #ff4d4f;
  color: #ffffff;
  font-size: 20rpx;
  padding: 2rpx 10rpx;
  border-radius: 15rpx;
  min-width: 30rpx;
  text-align: center;
}

.cart-btn {
  flex: 1;
  background-color: #f5f5f5;
  color: #333333;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 0;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.confirm-btn {
  flex: 1;
  background-color: #ff4d4f;
  color: #ffffff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 0;
  font-size: 28rpx;
  font-weight: bold;
}
</style>
